<!--
*Author：富行天下团队
 *
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/mall/Mall_good.js此处编写
 -->
<template>
  <div class="box-card">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-card>
        <div class="title">重要通知</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="健康安全滑雪" prop="healthy_and_safe_skiing">
              <el-input
                type="textarea"
                v-model="ruleForm.healthy_and_safe_skiing"
                :rows="7"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政府发布信息" prop="government_info">
              <el-input
                type="textarea"
                :rows="7"
                v-model="ruleForm.government_info"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <div class="title">地产</div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="在售">
              <el-input
                v-model="ruleForm.for_sale"
                type="number"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="租赁">
              <el-input
                v-model="ruleForm.lease"
                type="number"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="增值服务">
          <el-tag
            :key="tag"
            v-for="tag in ruleForm.value_added_services"
            closable
            :disable-transitions="false"
            @close="handleCloseDi(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="mini"
            @keyup.enter.native="handleInputConfirmDi"
            @blur="handleInputConfirmDi"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="mini"
            @click="showInputDi"
            >添 加</el-button
          >
        </el-form-item>
      </el-card>
      <el-card>
        <div class="title">吃，住，玩，购</div>
        <el-form-item
          :label="item.name"
          v-for="(item, index) in ruleForm.valList"
          :key="index"
          :prop="'valList.' + index + '.inputVal'"
          :rules="{
            required: true,
            message: `请输入${item.name}`,
            trigger: 'blur',
          }"
        >
          <el-tag
            :key="tag"
            v-for="tag in item.inputVal"
            closable
            @close="handleClose(tag, index)"
            >{{ tag }}</el-tag
          >
          <el-input
            class="input-new-tag"
            v-if="item.inputVisible"
            v-model.trim="item.inputTag"
            maxlength="8"
            :ref="'saveTagInputVal' + index"
            size="small"
            @keyup.enter.native="handleInputConfirm(item, index)"
            @blur="handleInputConfirm(item, index)"
          />
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput(index)"
            type="primary"
            >添加</el-button
          >
        </el-form-item>
      </el-card>
      <el-card>
        <div class="title">活动</div>
        <el-form-item label="活动" prop="activity">
          <el-button
            @click="resetForm2(ruleForm.activity.length - 1)"
            size="mini"
            type="primary"
            >添加</el-button
          >
          <div v-for="(val, i) in ruleForm.activity" :key="i">
            <el-select
              v-model="val.activiType"
              placeholder="请选择活动分类"
              size="mini"
            >
              <el-option
                :label="item.name"
                v-for="(item, i) in activiList"
                :key="i + item.id"
                :value="item.name"
                >{{ item.name }}</el-option
              >
            </el-select>
            &nbsp;
            <el-select
              v-model="val.activiCanter"
              placeholder="请选择活动内容"
              size="mini"
            >
              <el-option
                :label="item.name"
                v-for="(item, i) in activiListCanter"
                :key="i + item.id"
                :value="item.name"
                >{{ item.name }}</el-option
              >
            </el-select>
            &nbsp;
            <el-time-picker
              is-range
              v-model="val.timeSlot"
              range-separator="-"
              size="mini"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
            />
            &nbsp;
            <el-button @click="delActivi(i)" type="danger" size="mini"
              >删除</el-button
            >
          </div>
        </el-form-item>
      </el-card>
      <el-card>
        <div class="title">直播</div>
        <el-form-item label="达人探店时间">
          <span v-for="(item, index) in DRtime" :key="index">
            <el-time-picker
              is-range
              v-model="DRtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, DRtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(DRtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="DRtime.length < 6"
          ></el-button>
        </el-form-item>
        <el-form-item label="每天直播时间" prop="resource">
          <span v-for="(item, index) in MTtime" :key="index">
            <el-time-picker
              is-range
              v-model="MTtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, MTtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(MTtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="MTtime.length < 6"
          ></el-button>
        </el-form-item>
        <el-form-item label="雪场直播时间" prop="desc">
          <span v-for="(item, index) in XCtime" :key="index">
            <el-time-picker
              is-range
              v-model="XCtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, XCtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(XCtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="XCtime.length < 6"
          ></el-button>
        </el-form-item>
      </el-card>
      <el-card
        ><div class="title">交通</div>
        <el-form-item label="园区摆渡车" prop="type">
          <span v-for="(item, index) in YQtime" :key="index">
            <el-time-picker
              is-range
              v-model="YQtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, YQtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(YQtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="YQtime.length < 6"
          ></el-button>
        </el-form-item>
        <el-form-item label="高铁接驳" prop="resource">
          <span v-for="(item, index) in GTtime" :key="index">
            <el-time-picker
              is-range
              v-model="GTtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, GTtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(GTtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="GTtime.length < 6"
          ></el-button>
        </el-form-item>
        <el-form-item label="机场接驳" prop="desc">
          <span v-for="(item, index) in JCtime" :key="index">
            <el-time-picker
              is-range
              v-model="JCtime[index]"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              size="mini"
            ></el-time-picker>
            <el-button
              @click="deleteBtn(index, JCtime)"
              plain
              type="danger"
              icon="el-icon-minus"
              size="mini"
              style="margin-right: 10px"
            ></el-button>
          </span>
          <el-button
            @click="addBtn(JCtime)"
            type="success"
            icon="el-icon-plus"
            plain
            size="mini"
            v-if="JCtime.length < 6"
          ></el-button> </el-form-item
      ></el-card>
      <!-- 确认按钮 -->
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="margin-bottom: 20px"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
var vueParam = {
  data() {
    return {
      activiList: [
        { name: "品牌", id: 1 },
        { name: "酒店", id: 2 },
        { name: "文旅", id: 3 },
      ],
      activiListCanter: [
        { name: "赛事", id: 1 },
        { name: "演艺/演出", id: 2 },
        { name: "近井期品牌活动", id: 3 },
        { name: "酒店内活动", id: 4 },
        { name: "公开课教学", id: 5 },
        { name: "雪具大厅快闪舞蹈", id: 6 },
      ],
      ruleForm: {
        for_sale: "",
        lease: "",
        value_added_services: [],
        // 达人探店时间
        exploring_stores_with_influencers: "",
        live_streaming_every_day: "",
        ski_slope_situation: "",
        // 园区摆渡车
        shuttle: "",
        high_speed_rail_docking: "",
        airport_docking: "",
        healthy_and_safe_skiing: "",
        valList: [
          { inputVal: [], name: "吃", inputTag: "", inputVisible: false },
          { inputVal: [], name: "住", inputTag: "", inputVisible: false },
          { inputVal: [], name: "玩", inputTag: "", inputVisible: false },
          { inputVal: [], name: "购", inputTag: "", inputVisible: false },
        ],
        activity: [
          {
            activiType: "品牌",
            activiCanter: "演艺/演出",
            timeSlot: ["", ""],
          },
        ],
        government_info: "",
      },
      rules: {
        activity: [
          {
            required: true,
            message: "请添加活动",
            trigger: "change",
            validator: this.validateNumber,
          },
        ],
      },
      inputVisible: false,
      inputValue: "",
      DRtime: [new Date()],
      MTtime: [new Date()],
      XCtime: [new Date()],
      YQtime: [new Date()],
      GTtime: [new Date()],
      JCtime: [new Date()],
      flag: false,
      row: [],
    };
  },
  methods: {
    submitForm(formName) {
      // 时间
      this.ruleForm.exploring_stores_with_influencers = this.transformTime(
        this.DRtime
      );
      this.ruleForm.live_streaming_every_day = this.transformTime(this.MTtime);
      this.ruleForm.ski_slope_situation = this.transformTime(this.XCtime);
      this.ruleForm.shuttle = this.transformTime(this.YQtime);
      this.ruleForm.high_speed_rail_docking = this.transformTime(this.GTtime);
      this.ruleForm.airport_docking = this.transformTime(this.JCtime);
      // return console.log(this.ruleForm.exploring_stores_with_influencers,'this.ruleForm.exploring_stores_with_influencers');
      console.log(JSON.stringify(this.ruleForm.activity), 111);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            delKeys: null,
            mainData: {
              ...this.ruleForm,
              value_added_services: this.ruleForm.value_added_services.join(),
              activity: JSON.stringify(this.ruleForm.activity),
              eat: "",
              live: "",
              play: "",
              shopping: "",
            },
            detailData: null,
          };
          let eat = [];
          this.ruleForm.valList.map((_) => {
            if (_.name == "吃") {
              params.mainData.eat = _.inputVal.join("&,");
            } else if (_.name == "住") {
              params.mainData.live = _.inputVal.join("&,");
            } else if (_.name == "玩") {
              params.mainData.play = _.inputVal.join("&,");
            } else if (_.name == "购") {
              params.mainData.shopping = _.inputVal.join("&,");
            }
          });
          console.log(params);
          if (this.flag != "新增") {
            params.mainData.id = this.flag;
            this.http
              .post("api/Kuaibao_large_screen_data/update", params)
              .then((res) => {
                this.$message.success(res.message);
              });
          } else {
            this.http
              .post("api/Kuaibao_large_screen_data/Add", params)
              .then((res) => {
                this.$message.success(res.message);
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    validateNumber(rule, value, callback) {
      if (!this.ruleForm.activity.length) {
        callback(new Error("请添加活动"));
      } else {
        callback();
      }
    },
    // 吃1 住2 玩3 购4 删除
    handleClose(tag, index) {
      this.ruleForm.valList[index].inputVal.splice(
        this.ruleForm.valList[index].inputVal.indexOf(tag),
        1
      );
    },
    // 吃1 住2 玩3 购4
    showInput(index) {
      this.ruleForm.valList[index].inputVisible = true;
      this.$nextTick((_) => {
        const o = "saveTagInputVal" + index;
        this.$refs[o][0].focus();
      });
    },
    // 吃1 住2 玩3 购4
    handleInputConfirm(item) {
      let inputValue = item.inputTag;
      if (inputValue) {
        item.inputVal.push(inputValue);
      }
      item.inputVisible = false;
      item.inputTag = "";
    },
    // 活动添加
    resetForm2(len) {
      let form = this.ruleForm.activity[len];
      if (!form.activiType || !form.activiCanter || !form.timeSlot.length) {
        this.$message({
          message: "将正在添加的活动内容补充完整，方可添加下一条数据",
          type: "warning",
        });
        return;
      }
      console.log(
        "%c 🕑: this.ruleForm.activity ",
        "font-size:16px;background-color:#175b71;color:white;",
        this.ruleForm.activity
      );
      this.ruleForm.activity.push({
        activiType: "",
        activiCanter: "",
        timeSlot: ["", ""],
      });
    },
    // 活动删除
    delActivi(index) {
      if (this.ruleForm.activity.length <= 1) {
        this.$message({ message: "至少保留一条数据", type: "warning" });
        return;
      }
      this.ruleForm.activity.splice(index, 1);
    },
    // tabs组件按钮
    handleCloseDi(tag) {
      this.ruleForm.value_added_services.splice(
        this.ruleForm.value_added_services.indexOf(tag),
        1
      );
    },
    showInputDi() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirmDi() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ruleForm.value_added_services.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    // 时间减价按钮
    addBtn(data) {
      data.push(new Date());
    },
    deleteBtn(index, data) {
      data.splice(index, 1);
    },

    // 时间转换
    transformTime(arr) {
      const newArr = [];
      arr.forEach((item, index) => {
        if (Array.isArray(item)) {
          console.log(item);
          newArr.push(item[0] + "-" + item[1]);
        }
      });
      return newArr.join();
    },
    transformArr(str) {
      // "13:57-14:57,13:57-14:57" -- [['14:06', '15:06'],['14:06', '15:06']]
      const newArr = [];
      let index = 0;
      if (str.length > 0) {
        const string = str.replace(/-/g, ",");
        const arr = string.split(",");
        while (index < arr.length) {
          newArr.push(arr.slice(index, (index += 2)));
        }
        return newArr;
      } else {
        return [new Date()];
      }
    },

    getPageData() {
      let parmas = {
        order: "desc",
        page: 1,
        rows: 30,
        sort: "id",
        wheres: [],
      };
      this.http
        .post("api/Kuaibao_large_screen_data/getPageData", parmas)
        .then((res) => {
          if (res.rows) {
            this.flag = res.rows[0].id;
            this.showRow(res.rows[0]);
          } else {
            this.flag = "新增";
          }
        });
    },

    showRow(row) {
      this.row = row;
      this.ruleForm.government_info = this.row.government_info;
      this.ruleForm.healthy_and_safe_skiing = this.row.healthy_and_safe_skiing;
      this.ruleForm.lease = this.row.lease;
      this.ruleForm.for_sale = this.row.for_sale;
      // 时间
      this.DRtime = this.transformArr(
        this.row.exploring_stores_with_influencers
      );
      this.MTtime = this.transformArr(this.row.live_streaming_every_day);
      this.XCtime = this.transformArr(this.row.ski_slope_situation);
      this.JCtime = this.transformArr(this.row.airport_docking);
      this.GTtime = this.transformArr(this.row.high_speed_rail_docking);
      this.YQtime = this.transformArr(this.row.shuttle);
      this.ruleForm.value_added_services =
        this.row.value_added_services.split(",");
      this.ruleForm.activity = JSON.parse(this.row.activity);

      this.ruleForm.valList[0].inputVal = this.row.eat.split("&,");
      this.ruleForm.valList[1].inputVal = this.row.live.split("&,");
      this.ruleForm.valList[2].inputVal = this.row.play.split("&,");
      this.ruleForm.valList[3].inputVal = this.row.shopping.split("&,");
    },
  },
  created() {
    this.getPageData();
  },
  watch: {},
};
export default vueParam;
</script>
<style scoped>
.title {
  padding-bottom: 10px;
  font-size: 22px;
  font-weight: 500;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.demo-ruleForm {
  margin-left: 10px;
  width: 98%;
}
.el-range-editor.el-input__inner {
  margin-top: 10px;
  margin-right: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  display: flex;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-card {
  margin: 10px 0;
}
</style>
